<button class="task-view-pane-close" onclick="return close_task();"><i class="fa fa-chevron-right"></i></button>

<!-- 窗口标题及状态栏 -->
<div class="px-2 my-2" style="margin-left: 24px;">

    <!-- 标题 -->
    <div class="d-flex">
        <div class="dropdown">
            <div class="btn-link px-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <h4 class="text-truncate" style="max-width: 580px;">
                    {{task.info.name}}
                </h4>
            </div>
            <form id="form-mod-name" class="dropdown-menu p-2">
                <div class="form-group">                    
                    <input type="text" class="form-control" value="{{task.info.name}}">
                </div>
                <div class="form-group mb-0">
                    <button type="button" class="btn btn-sm btn-primary form-control my-0" onclick="return mod_name();">重命名</button>
                </div>
            </form>
        </div>

        {% if #task.info.tags > 0 then %}
        <small class="ml-2 mt-1" style="font-size: 12px; vertical-align: middle;">
            {% for _, tag in ipairs(task.info.tags) do %}
            <span class="badge {{tags[tag].color}} mr-1">{{tags[tag].title}}</span>
            {% end %}
        </small>
        {% end %}
    </div>
    <hr class="mx-0 mt-0 mb-1">

    <!-- 状态栏 -->
    <div class="d-flex" style="font-size:.95em">

        <!-- 指派 -->
        <div class="dropdown">
            <div class="btn-link px-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-hand-o-right mr-1"></i>{{task.info.assigned_name}}
            </div>
            <form class="dropdown-menu p-0 border-0">
                <select class="custom-select" onchange="return mod_assign(this);">
                    {% for _, info in ipairs(assignable or {}) do %}
                    {% if info.uid == task.info.assigned then %}
                    <option value="{{info.uid}}" selected>【{{info.user_role}}】{{info.user}}</option>
                    {% else %}                    
                    <option value="{{info.uid}}">【{{info.user_role}}】{{info.user}}</option>
                    {% end %}
                    {% end %}
                </select>
            </form>
        </div>

        <!-- 协作 -->
        <div class="dropdown">
            <div class="btn-link px-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-bug mr-1"></i>{{task.info.cooperator_name}}
            </div>
            <form class="dropdown-menu p-0 border-0">
                <select class="custom-select" onchange="return mod_cooperator(this);">
                    {% for _, info in ipairs(cooperators or {}) do %}
                    {% if info.uid == task.info.cooperator then %}
                    <option value="{{info.uid}}" selected>【{{info.user_role}}】{{info.user}}</option>
                    {% else %}                    
                    <option value="{{info.uid}}">【{{info.user_role}}】{{info.user}}</option>
                    {% end %}
                    {% end %}
                </select>
            </form>
        </div>

        <!-- 优先级 -->
        {% if is_admin then %}
        <div class="dropdown">
            <div class="btn-link px-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-tag mr-1 {{weights[task.info.weight].color}}"></i>{{weights[task.info.weight].title}}
            </div>
            <div class="dropdown-menu">
                {% for i, info in ipairs(weights or {}) do %}
                <a class="dropdown-item" href="#" onclick="return mod_weight('{{i}}')">{{info.title}}</a>
                {% end %}
            </div>
        </div>
        {% else %}
        <div>
            <div class="px-2">
                <i class="fa fa-tag mr-1"></i>{{weights[task.info.weight].title}}
            </div>
        </div>
        {% end %}

        <!-- 时间: 只有项目管理员可以更改时间 -->
        {% if is_admin then %}
        <div class="dropdown">
            <div class="btn-link px-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-calendar mr-1"></i>{{string.format('%d月%d日 - %d月%d日', task.info.start_time.month, task.info.start_time.day, task.info.end_time.month, task.info.end_time.day)}}
            </div>
            <form id="form-mod-time" class="dropdown-menu p-4">                
                <div class="form-group">
                    <label for="start-time">修改开始时间</label>
                    <input type="text" class="form-control form-datetime" id="start-time" name="start_time" value="{{tostring(task.info.start_time)}}" required>
                </div>

                <div class="form-group">
                    <label for="end-time">修改结束时间</label>
                    <input type="text" class="form-control form-datetime" id="end-time" name="end_time" value="{{tostring(task.info.end_time)}}"  required>
                </div>

                <div class="form-group mb-0">
                    <button type="button" class="btn btn-sm btn-primary form-control my-0" onclick="return mod_time();">修改时间</button>
                </div>
            </form>
        </div>
        {% else %}
        <div>
            <div class="px-2">
                <i class="fa fa-calendar mr-1"></i>{{string.format('%d月%d日 - %d月%d日', task.info.start_time.month, task.info.start_time.day, task.info.end_time.month, task.info.end_time.day)}}
            </div>
        </div>
        {% end %}
        
        <!-- 状态 -->
        <div class="dropdown">
            <div class="btn-link px-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {% if task.info.status == 1 then %}
                <i class="fa fa-circle-o mr-1"></i>待办中
                {% elseif task.info.status == 2 then %}
                <i class="fa fa-dot-circle-o mr-1"></i>开发中
                {% elseif task.info.status == 3 then %}
                <i class="fa fa-exclamation-circle mr-1"></i>测试中
                {% elseif task.info.status == 4 then %}
                <i class="fa fa-check-circle mr-1"></i>已完成
                {% else %}                
                <i class="fa fa-archive mr-1"></i>已归档
                {% end %}
            </div>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#" onclick="return mod_status(1)"><i class="fa fa-circle-o mr-1"></i>待办中</a>
                <a class="dropdown-item" href="#" onclick="return mod_status(2)"><i class="fa fa-dot-circle-o mr-1"></i>开发中</a>
                <a class="dropdown-item" href="#" onclick="return mod_status(3)"><i class="fa fa-exclamation-circle mr-1"></i>测试中</a>
                {% if is_admin or session.uid == task.info.creator or session.uid == task.info.cooperator then %}
                <a class="dropdown-item" href="#" onclick="return mod_status(4)"><i class="fa fa-check-circle mr-1"></i>已完成</a>
                {% end %}
            </div>
        </div>

        <!-- 附件管理 -->
        <div class="btn-link px-2" onclick="return add_attachment();">
            <i class="fa fa-upload mr-1"></i>上传附件
        </div>

        <!-- 编辑 -->
        <div class="btn-link px-2" onclick="return edit_content();">
            <i class="fa fa-pencil-square-o mr-1"></i>编辑
        </div>

        {% if task.info.creator == session.uid or is_admin then %}        
        <!-- 如果是发布者，可以删除任务 -->
        <div class="btn-link pl-2" data-toggle="modal" data-target="#mdl-del-task">
            <i class="fa fa-trash mr-1"></i>删除
        </div>
        {% end %}
    </div>
    <hr class="mt-2">
</div>

<!-- 任务信息 -->
<div class="task-detail-info-pane mt-4" editing-comment="false">
    <!-- 附件 -->
    {% if #task.attachments > 0 then %}
    <div class="mt-1 mb-4">
        <span>附件：</span>

        {% for _, info in ipairs(task.attachments or {}) do %}
        <small class="border p-1 mr-2">
            <a href="{{info.url}}">
                <i class="fa fa-paperclip mr-1"></i>{{info.name}}
            </a>
            <i class="fa fa-close ml-2" onclick="return del_attachment('{{info.id}}');"></i>
        </small>
        {% end %}
    </div>
    {% end %}

    <!-- 任务描述 -->
    <div id="task-content-preview" style="min-height: 250px;">{{task.info.content}}</div>

    <!-- 任务评论及动态 -->
    <div class="mt-4">
        <ul class="nav nav-tabs" id="task-addition-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="task-comment-tab" data-toggle="tab" href="#task-comment-pane" role="tab" aria-controls="task-comment-pane" aria-selected="true">评论</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="task-event-tab" data-toggle="tab" href="#task-event-pane" role="tab" aria-controls="task-event-pane" aria-selected="false">动态</a>
            </li>
        </ul>

        <div class="tab-content h-100">
            <!-- 评论分页 -->
            <div class="tab-pane show active" id="task-comment-pane" role="tabpanel" aria-labelledby="task-comment-tab">
                {% for _, info in ipairs(task.comments) do %}
                <div class="mt-2 border-bottom">
                    <div class="d-flex mb-2">
                        <img class="mt-1 mr-2 rounded-circle" src="{{info.user_avatar}}" width="40px" height="40px">
                        <div class="">
                            <b class="mt-0">{{info.user}}</b><br>
                            <small class="text-muted">
                                <i class="fa fa-clock-o mr-1"></i>{{tostring(info.timepoint)}}
                                {% if info.uid == session.uid then %}
                                <a href="#" class="btn-link ml-2" onclick="return del_comment('{{info.id}}');">撤回该评论</a>
                                {% else %}
                                <a href="#" class="btn-link ml-2" onclick="return rep_comment('{{info.user}}');">回复</a>
                                {% end %}
                            </small>
                        </div>
                    </div>

                    {*info.comment*}
                </div>
                {% end %}
            </div>

            <!-- 事件分页 -->
            <div class="tab-pane pt-1" id="task-event-pane" role="tabpanel" aria-labelledby="task-event-tab">
                <ul class="p-2" style="list-style-type: none;font-size: .8em;">
                    {% for _, ev in ipairs(task.events) do %}
                    <li class="text-muted">
                        <i class="fa fa-calendar mr-1"></i><span class="mr-1">{{tostring(ev.timepoint)}}</span><b class="mr-1">{{ev.user}}</b>{{ev.event_desc}} 
                    </li>
                    {% end %}
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 删除任务确认 -->
<div id="mdl-del-task" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">删除任务</h5>                
            </div>
            <div class="modal-body">
                <div class="alert alert-warning" role="alert">
                    <strong>警告：</strong>
                    <ul>
                        <li>只有发布者本人或管理员可以删除文档！</li>
                        <li>删除任务不可恢复</li>
                    </ul>
                </div>

                <div id="err"></div>
                
                请确认需要删除的任务：<span class="text-danger">{{task.info.name}}</span>                    
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="return del_task();">确  定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
            </div>
        </div>
    </div>
</div>

<!-- 底部评论工具 -->
<div class="task-comment-pane px-2" editing-comment="false">
    <input id="trigger-task-comment" type="text" class="form-control" placeholder="发表评论...">
    <div class="editing-pane pt-2">
        <textarea id="task-comment-input" data-provide="markdown" rows="10"
            data-savable="false"
            data-iconlibrary="fa"
            data-upload="/dashboard/files/upload"
            data-fullscreen = "{ enable: false }"
            data-footer='<div class="text-right"><button id="btn-close-edit" type="button" class="btn btn-sm btn-secondary mr-2" onclick="return end_comment(false);"><i class="fa fa-close"></i></button><button id="btn-save-content" type="button" class="btn btn-sm btn-primary" onclick="return end_comment(true);"><i class="fa fa-send-o"></i></button></div>'></textarea>
    </div>
</div>

<input type="file" id="upload-task-attachment" hidden>

<script>
var content = $('#task-content-preview').get(0).innerHTML;
var editor = null;

$('.modal').on('shown.bs.modal', function(e) {
    var mask = $('.modal-backdrop').detach();
    mask.appendTo('.task-view-pane');
    $('.modal #err').empty();
});

$(document).ready(function() {
    $('#task-content-preview').empty();
    $('#task-content-preview').append('<div class="md-preview d-block mh-100">' + marked(content || '') + '</div>');
    PR.prettyPrint();
    $('.flowchart').each(function() {
        var elem = $(this);
        var diag = flowchart.parse(elem.text());
        elem.empty();
        diag.drawSVG(elem.get(0));
    });
});

$('#form-mod-time .form-datetime').datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true
});

$('#trigger-task-comment').focusin(function() {
    $('.task-comment-pane').attr('editing-comment', true);
    $('.task-detail-info-pane').attr('editing-comment', true);
    $('#task-comment-input').focus();
});

$('#task-comment-input').markdown();

$('#upload-task-attachment').change(function() {
    var form = new FormData();
    form.append('attachment', $('#upload-task-attachment')[0].files[0]);
    form.append('tid', '{{task.info.id}}');

    $.ajax({
        url: '/dashboard/tasks/add_attachment',
        type: 'POST',
        cache: false,
        data: form,
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function (ret) {
            refresh_task_info();
        },
        error: function (err) {
            alert('上传失败！' + err);
        }
    });
});

function refresh_task_info() {
    open_task('{{task.info.id}}', true);
}

function mod_name() {
    $.post('/dashboard/tasks/mod_name', {
        tid: '{{task.info.id}}', 
        org_name: '{{task.info.name}}',
        name: $('#form-mod-name input').val()
    }, refresh_task_info);
}

function mod_assign(elem) {
    $.post('/dashboard/tasks/mod_assign', { tid : '{{task.info.id}}', org_uid : '{{task.info.assigned}}', new_uid : $(elem).val() }, refresh_task_info);
}

function mod_cooperator(elem) {
    $.post('/dashboard/tasks/mod_cooperator', { tid : '{{task.info.id}}', org_uid : '{{task.info.cooperator}}', new_uid : $(elem).val() }, refresh_task_info);
}

function mod_time() {
    $.post('/dashboard/tasks/mod_time', {
        tid: '{{task.info.id}}', 
        org_start: '{{tostring(task.info.start_time)}}',
        org_end: '{{tostring(task.info.end_time)}}',
        start_time : $('#form-mod-time #start-time').val(), 
        end_time : $('#form-mod-time #end-time').val() 
    }, refresh_task_info);
}

function mod_status(status) {
    $.post('/dashboard/tasks/mod_status', { tid : '{{task.info.id}}', org_status : '{{task.info.status}}', new_status : status }, refresh_task_info);
}

function mod_weight(weight) {
    $.post('/dashboard/tasks/mod_weight', { tid : '{{task.info.id}}', org_weight : '{{task.info.weight}}', new_weight : weight }, refresh_task_info);
}

function edit_content() {
    var editorContainer = $('<div id="doc-editor"></div>');
    $('#task-content-preview').empty();
    $('#task-content-preview').append(editorContainer);

    editor = $('#doc-editor').markdown({
        autofocus: true,
        iconlibrary: 'fa',
        height: 300,
        uploadUrl: '/dashboard/files/upload',
        footer: '<div><button id="btn-save-content" type="button" class="btn btn-sm btn-primary mr-2" onclick="return end_edit(true);">保  存</button><button id="btn-close-edit" type="button" class="btn btn-sm btn-secondary" onclick="return end_edit(false);">关  闭</button></div>',
        fullscreen: { enable : false },
        onShow: function(e) {
            e.setContent(content);
        }
    });
}

function end_edit(save) {
    if (save) {
        var new_content = $('.md-input').val();
        if (new_content == content) return;

        $.post('/dashboard/tasks/mod_content', { id: '{{task.info.id}}', content: new_content }, function(ret) {
            if (ret.ok) refresh_task_info();
        });
    } else {
        var new_content = $('.md-input').val();
        if (new_content != content) {
            refresh_task_info();
        } else {
            $('#task-content-preview').empty();
            $('#task-content-preview').append('<div class="md-preview d-block mh-100">' + marked(content || '') + '</div>');
            PR.prettyPrint();
            $('.flowchart').each(function() {
                var elem = $(this);
                var diag = flowchart.parse(elem.text());
                elem.empty();
                diag.drawSVG(elem.get(0));
            });
        } 
    }
}

function end_comment(send) {
    if (send) {
        var comment = $('#task-comment-input').val();
        $.post('/dashboard/tasks/add_comment', { id: '{{task.info.id}}', comment: marked(comment || '') }, function(ret) {
            if (ret.ok) refresh_task_info();
        });
    }

    $('#task-comment-input').val('');
    $('.task-comment-pane').attr('editing-comment', false);
    $('.task-detail-info-pane').attr('editing-comment', false);
}

function del_comment(id) {
    $.post('/dashboard/tasks/del_comment', { id: id }, function(ret) {
        if (ret.ok) refresh_task_info();
    });
}

function rep_comment(user) {
    $('#task-comment-input').val('<i class="fa fa-at mr-1"></i><b class="mr-1">' + user + ':</b>');
    $('#trigger-task-comment').focusin();
}

function add_attachment() {
    $('#upload-task-attachment').click();
}

function del_attachment(aid) {
    $.post('/dashboard/tasks/del_attachment', { tid: '{{task.info.id}}', aid: aid }, function (ret) {
        if (ret.ok) refresh_task_info();
    });
}

function del_task() {
    $.post('/dashboard/tasks/del_task', {id: '{{task.info.id}}'}, function(ret) {
        if (ret.ok) close_task(true);
        else show_error('#mdl-del-task #err', '删除任务失败', ret.err_msg);
    });
}
</script>